<template>
	<div class="statisBox heightMax publicbox" v-loading='loading'>
		<el-row :gutter="20">
			<el-col :span="4">
				<span class="font14" style="min-width: 50px;">组织：</span>
				<el-select size="mini" v-model="organization" filterable placeholder="请选择组织" clearable>
					<el-option v-for="(item) in organizationArr" :value="item.org" :label="item.name" :key='item.org'>
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="4">
				<span class="font14">设备编号：</span>
				<el-input v-model="keyWords" size="mini" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<span class="font14" style="min-width: 50px;">粒度：</span>
				<el-select size="mini" v-model="granularity" placeholder="年/季度/月/日" clearable>
					<el-option v-for="(item,index) in granularityArr" :value="item.value" :label="item.label" :key='index'>
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="8">
				<span class="font14">统计时间：</span>
				<el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" size="mini" v-model="searchTime"
				 type="datetimerange" range-separator="—" start-placeholder="起始日期" end-placeholder="结束日期" :unlink-panels='true'>
				</el-date-picker>
			</el-col>
			<div class="fr">
				<el-button type="primary" icon="el-icon-search" size="mini" @click='getStatisticsMes(1)'>搜索</el-button>
				<el-button icon="el-icon-delete" size="mini" @click='reset'>重置</el-button>
			</div>
		</el-row>
		<div class="tableBox" style="margin-top: 10px;">
			<vueScroll>
				<div ref='echartsBar' class="echartsBar">

				</div>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @select-all="selectChange" @selection-change="selectChange"
				 style="width: 100%;margin-top: 15px;" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="组织">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
								<span class="speSpan">{{scope.row.name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column :label="item" v-for="(item,index) in guzhangArr" :key='index' min-width="50">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.value[index].toString()" placement="top">
								<span class="speSpan">{{scope.row.value[index].toString()}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		noLoadingPost,
		moment,
		axiosChange,
		AllLoading,
		filter
	} from "@/common.js";
	export default {
		mounted() {
			var date = new Date();
			var year = date.getFullYear() + "";
			var month = (date.getMonth() + 1) + "";
			var begin = year + "-" + month + "-01 00:00:00"
			this.searchTime = [begin, moment(new Date()).format('YYYY-MM-DD HH:mm:ss')]
			this.getOrganization()
			this.getStatisticsMes()
		},
		data() {
			return {
				guzhangArr: ['轿厢报警按钮', '电梯困人', '非平层停梯', '安全回路断路', '轿厢冲顶', '轿厢蹲底', '开门走梯', '电梯速度异常', '电梯运行时安全回路断路', '关门故障', '开门故障',
					'轿厢在开锁区域外停止', '轿厢意外移动', '电动机运转时间限制器动作', '楼层位置丢失', '其他阻止电梯再启动的故障'
				],
				loading: true,
				organization: '',
				organizationArr: [],
				keyWords: '',
				searchTime: [],
				startYearTime: '',
				endYeaeTime: '',
				granularity: 1,
				granularityArr: [{
					value: 4,
					label: '年'
				}, {
					value: 3,
					label: '季度'
				}, {
					value: 2,
					label: '月'
				}, {
					value: 1,
					label: '日'
				}],
				quarter: '',
				quarterArr: [{
					label: '第一季度(1~3月)',
					value: 1
				}, {
					label: '第二季度(4~6月)',
					value: 2
				}, {
					label: '第三季度(7~9月)',
					value: 3
				}, {
					label: '第四季度(10~12月)',
					value: 4
				}],
				page: 1,
				page_size: 10,
				total: 0,
				tableData: []
			}
		},
		computed: {
			timeDisabled() {
				if (this.startYearTime) {
					return false
				} else {
					return true
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.startYearTime).valueOf()
					}
				}
			}
		},
		methods: {
			selectChange() {

			},
			handleSizeChange(size) {
				this.page_size = size
				this.getStatisticsMes(1)
			},
			handleCurrentChange(page) {
				this.page = page
				this.getStatisticsMes(1)
			},
			monthChange(data) {
				let year = new Date().getFullYear()
				if (data == 1) {
					return [`${year}-01-01 00:00:00`, `${year}-03-01 00:00:00`]
				} else if (data == 1) {
					return [`${year}-04-01 00:00:00`, `${year}-06-01 00:00:00`]
				} else if (data == 3) {
					return [`${year}-07-01 00:00:00`, `${year}-09-01 00:00:00`]
				} else if (data == 4) {
					return [`${year}-10-01 00:00:00`, `${year}-12-01 00:00:00`]
				}
			},
			getOrganization() {
				axiosGet('/manu/elevator/alarm/organization/', {}, (res) => {
					if (res.code == 0) {
						this.organizationArr = res.detail
						this.organization = res.detail[0].org
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			getStatisticsMes(val) {
				this.loading = true
				let org_type = ''
				let org = ''
				let name = ''
				let time_from = ''
				let time_to = ''
				if (val) {
					this.page = 1
					this.page_size = 10
					console.log(this.organization, this.organizationArr[0].org)
					if (this.organization != this.organizationArr[0].org) {
						if (this.organization && this.organizationArr.length != 0) {
							for (let i = 0; i < this.organizationArr.length; i++) {
								if (this.organizationArr[i].org == this.organization) {
									org_type = this.organizationArr[i].org_type
									org = this.organizationArr[i].org
									name = this.organizationArr[i].name
									break
								}
							}
						}
					}
				}
				if (this.searchTime.length != 0) { //月份 和 日
					time_from = this.searchTime[0]
					time_to = this.searchTime[1]
				}
				let params = {
					key_words: this.keyWords,
					org: org,
					org_type: org_type,
					name: name,
					granularity: this.granularity,
					time_from: time_from,
					time_to: time_to,
					page: this.page,
					page_size_count: this.page_size
				}
				axiosGet('/manu/elevator/alarm/statistics/', params, (res) => {
					if (res.code == 0) {
						this.tableData = res.detail.list
						this.total = res.detail.count
						if (res.detail.histogram.length != 0) {
							let arr = res.detail.histogram
							let method = 'day'
							if (this.granularity == 1) {
								method = 'day'
							} else if (this.granularity == 2) {
								method = 'month'
							} else if (this.granularity == 3) {
								method = 'quarter'
							} else {
								method = 'year'
							}
							let nweArr = filter(arr, method)
							console.log(nweArr)
							this.createEcharts(nweArr)
						} else {
							this.$message.info('暂无数据')
						}
					} else {
						this.$message.error(res.detail.result)
					}
					this.loading = false
				})
			},
			changeStartTime() {
				this.endYeaeTime = ''
			},
			reset() {
				this.page = 1
				this.page_size = 10
				this.organization = this.organizationArr[0].org
				this.keyWords = ''
				this.searchTime = []
				this.startYearTime = ''
				this.endYeaeTime = ''
				this.granularity = 1
				this.getStatisticsMes(1)
			},
			createEcharts(data) {
				let arr = data.map((item) => {
					item['轿厢报警按钮'] = item.value1
					item['电梯困人'] = item.value2
					item['非平层停梯'] = item.value3
					item['安全回路断路'] = item.value4
					item['轿厢冲顶'] = item.value5
					item['轿厢蹲底'] = item.value6
					item['开门走梯'] = item.value7
					item['电梯速度异常'] = item.value8
					item['电梯运行时安全回路断路'] = item.value9
					item['关门故障'] = item.value10
					item['开门故障'] = item.value11
					item['轿厢在开锁区域外停止'] = item.value12
					item['轿厢意外移动'] = item.value13
					item['电动机运转时间限制器动作'] = item.value14
					item['楼层位置丢失'] = item.value15
					item['其他阻止电梯再启动的故障'] = item.value16
					return item
				})
				console.log(arr)
				let dom = this.$refs.echartsBar
				let myChart = this.echarts.init(dom)
				myChart.setOption({
					legend: {
						width:'90%',
						x: 'left',
						y: 'top',
						// orient: 'vertical'
						tooltip: {
							show: true
						},
					},
					dataZoom: [{
						start: 0,
						end: 20,
						type: 'inside'
					}, {
						type: 'slider'
					}],
					color: ['#0000a1', '#1f6ed4', '#39bae8', '#2d095c', '#20366b', '#dd7777', '#fd5f00', '#005792', '#f6d04d',
						'#f29c2b', '#8bc24c', '#515bd4', '#feda77', '#dd2a7b', '#00a03e', '#b8d9c2'
					],
					tooltip: {},
					dataset: {
						dimensions: ['date', '轿厢报警按钮', '电梯困人', '非平层停梯', '安全回路断路', '轿厢冲顶', '轿厢蹲底', '开门走梯', '电梯速度异常', '电梯运行时安全回路断路',
							'关门故障', '开门故障', '轿厢在开锁区域外停止', '轿厢意外移动', '电动机运转时间限制器动作', '楼层位置丢失', '其他阻止电梯再启动的故障'
						],
						source: arr
					},
					xAxis: {
						type: 'category'
					},
					yAxis: {},
					// Declare several bar series, each will be mapped
					// to a column of dataset.source by default.
					series: [{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						}
					]
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.el-col {
		display: flex;
		align-items: center;

		span {
			float: left;
			min-width: 80px;
		}
	}

	.searchDiv {
		width: 100%;
	}

	.echartsBar {
		width: 100%;
		height: 450px;

	}
</style>
